<!--
 * @Author: '钟文超' '738327089@qq.com'
 * @Date: 2025-09-30 10:17:33
 * @LastEditors: '钟文超' '738327089@qq.com'
 * @LastEditTime: 2025-09-30 14:20:53
 * @FilePath: \mic_front\main\public\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="微前端主应用 - 支持PWA" />
    <link rel="manifest" href="./manifest.json">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>微前端主应用</title>
</head>
```

现在我们将创建 `manifest.json` 文件和默认的 `favicon.ico` 占位文件。你可以后续替换图标资源。

e:\project\mic_front\main\public\manifest.json
```json
<<<<<<< SEARCH
{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "short_name": "微前端主应用",
  "name": "Micro Frontend Main Application",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}
<body>
    <div id="root">
        <div class="mainapp">
            <header class="mainapp-header">
                <h1>微前端主应用</h1>
                <div class="login-section">
                    <span id="user-info" class="hidden">欢迎，<span id="username"></span></span>
                    <button id="login-btn">登录</button>
                    <button id="logout-btn" class="hidden">登出</button>
                </div>
            </header>
            <nav class="mainapp-nav">
                <a href="/">首页</a>

                <!-- React子应用及其子路由 -->
                <div class="dropdown">
                    <a href="/react">React子应用</a>
                    <div class="dropdown-content">
                        <a href="/react/page1">React Page 1</a>
                        <a href="/react/page2">React Page 2</a>
                        <a href="/react/page3">React Page 3</a>
                    </div>
                </div>

                <!-- Vue子应用及其子路由 -->
                <div class="dropdown">
                    <a href="/vue">Vue子应用</a>
                    <div class="dropdown-content">
                        <a href="/vue/page1">Vue Page 1</a>
                        <a href="/vue/page2">Vue Page 2</a>
                    </div>
                </div>

                <!-- Angular子应用及其子路由 -->
                <div class="dropdown">
                    <a href="/angular">Angular子应用</a>
                    <div class="dropdown-content">
                        <a href="/angular/page1">Angular Page 1</a>
                        <a href="/angular/page2">Angular Page 2</a>
                        <a href="/angular/page3">Angular Page 3</a>
                    </div>
                </div>

                <a href="/native">原生HTML/JS子应用</a>
            </nav>
            <main id="subapp-container">
                <!-- 子应用将挂载到这里 -->
                <div id="subapp-viewport"></div>
            </main>

            <!-- 登录模态框 -->
            <div id="login-modal" class="modal hidden">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>用户登录</h2>
                    <form id="login-form">
                        <div class="form-group">
                            <label for="username-input">用户名:</label>
                            <input type="text" id="username-input" required>
                        </div>
                        <div class="form-group">
                            <label for="password-input">密码:</label>
                            <input type="password" id="password-input" required>
                        </div>
                        <button type="submit">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>